<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>{$praiseContent['title']}</title>

<css href="/Public/css/maint.css?v=3" />
<css href="/Public/css/font.css" />
<link rel="stylesheet" href="/Public/css/gyBase.css">
<script  src="/Public/js/jquery-1.7.1.min.js" ></script>
<script src="/Public/js/banner.js" type="text/javascript"></script>

<script  src="/Public/js/jquery.masonry.min.js" ></script>

<script  src="/Public/js/common.js" ></script>
<script  src="/Public/js/loading.js" ></script>

<script>
	var g_endTimeStamp = "{$praiseContent['enddate']}";
</script>
<link rel="stylesheet" href="/Public/css/praise_modify.css">
<script src="/Public/js/praise_modify.js" ></script>

<script type="text/javascript">
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (isWeixin) {
        document.addEventListener("WeixinJSBridgeReady",function(){
            add_content()
        });
    }else{
        $(function(){
            add_content();
        });
    }
function add_content() {
	var container = $('#ulWaterfall');
	var loading = $('#imloading');
	var searching = 0;
	loading.data("on", true);
	var load = function( sqlJson, top, left ) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
				html +="<li class='item' style='text-align: center'><a href='/Wap/Praise/fetch_one?praise={$praise}&id="+sqlJson.datas[i].id+"'>";
                html +="<span class='spanNum'>"+"编号："+ sqlJson.datas[i].grade + "号</span>";
				if(sqlJson.datas[i].pic != ''){
                    html += "<img class='pic' src='"+sqlJson.datas[i].pic+"' data-href='"+sqlJson.datas[i].pic+"' alt=' '>";
				}
                html += "</a>";//}
//				html +="<div class='divNum'></div>";

				html +="<div class='workName'>"+sqlJson.datas[i].show_name+"</div>";
				html +="<div class='divPraise'>"
				+"<span class='spanHeart'><span class='icon iconfont icon-aixin2'></span>"+sqlJson.datas[i].votes+"票</span>"
				+"<a href='/?m=wap&c=praise&a=fetch_one&praise={$praise}&id="+sqlJson.datas[i].id+"'><div class='like'>投票</div></a>"
				+"</div></li>";
			}
			var time = setTimeout(function() {
				var style = { opacity: 1 };
				if( top && left ){
				}
				var newElems = $(html).css( {opacity: 0} ).appendTo(container);

				newElems.find( "img.pic" ).each( function(){
				} );
				newElems.imagesLoaded(function() {
					newElems.animate( style, 10 );
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	var search = function( options ){
		searching = 1;
		$.ajax({
			url: "/?m=wap&c=praiseItem&a=search",
			data: options,
			type: "POST",
			success: function( result ){
				$( "#waterfull" ).html( "<ul id='ulWaterfall' class='masonry' style='position:relative'></ul>" );
				container = $('#ulWaterfall');
				common.waterfall();
				$(window).trigger( "scrollTop" );
				load( result, 1, 1 );
			},
			error: function(){
			}
		});
	};

	$(".searchBtn").unbind( "click").bind( "click", function(){
            var str = $( "#searchKeyword" ).val();
            if( !$.trim( str ) ) return;
		    search( {praise: "{$praise}", keyword: str} );
	});

	$(".searchDel").unbind( "click").bind( "click", function(){
		$("#searchKeyword").val("");
	});

	common.show.fetchJson( { praise: "{$praise}"}, load );

	$(window).scroll(function() {
		if (!loading.data("on")) return;
		var itemNum = $('#waterfull').find('.item').length;
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop() && !searching ) {
			loading.data("on", false).fadeIn();
			setTimeout( function(){
				common.show.fetchJson( { priase: "{$praise}" }, load );
			}, 800 );
		}
	});
}

</script>
<style type="text/css">
	.item img {
		/*padding-top: 30px;*/
	}
	input{
		background:none;
		border:none;
	}
</style>
</head>
<body style="background-color:#eee;">
<canvas style="display: none" id="myCanvas"></canvas>
<img src="/Wap/Praise/code?praise={$praise}" style="display: none" id="qrcode">
<img src="/Public/images/save.png" id="corner_img" style="display: none">
<img src="/Public/images/wxtitle.jpg" id="wxtitle_img" style="display: none">
<img src="" style="display: none;position: fixed;left: 15%;top: 8%;z-index: 15;width: 70%;" id="result">
<img id="cancle_img" src="/Public/images/cancle.png" style="position: fixed;z-index: 15;width: 7%;left: 5%;top: 8%;display: none" onclick="cancle_img();">
<include file="Tpl/header" />
<div id="wrapper">
<div id="main">
	<div class="activeTitles">
		<ul class="ulactTitle"> <!-- TODO: not good, cause html rendering uneffective, should use real tab -->
			<?php
				if(empty($info)){
					echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
				}else{
					$link = json_decode($info, true);
					if(empty($link['desc'])){
						echo '<li class="on" style="width: 100%"><span>人气榜</span></li>';
					}else{
						echo '<li class="on" ><span>人气榜</span></li><li><a href="/Wap/Praise/index?type=info&praise='
						. $praise . '"><span class="bor0">活动说明</span></a></li>';
					}
				}
			?>
        </ul>
    </div>
    <div class="searchBox">
        <div class="search">
            <!--<span class="icon iconfont icon-sousuo"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索" id="searchBtn"/> -->

				<input class="txt"  placeholder="输入名称进行搜索" id="searchKeyword"/>

			<span class="icon iconfont searchDel"></span>
        </div> <input type="button" class="searchBtn" value="">
	</div>
		<div class="content">
			<div class="waterFallBox" id="waterfull">
				<ul id="ulWaterfall">
				</ul>
			</div>
			<div id="imloading" class="loading">加载中</div>
		</div>
</div>
</div>
<!--<img src="/Public/images/praise_share.png" style="position: fixed;top:75%;right:6%;width: 18%;z-index: 10;" id="share_btn" onclick="convert2canvas();">-->
<div style="background-color: rgba(0,0,0,0.8);z-index: 13;width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none" id="mask"></div>

<include file="Tpl/load" />
<include file="Tpl/footer" praise="{$praise}"/>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="/Public/js/html2canvas.min.js"></script>
<script type="text/javascript" src="/Public/js/canvas2image.js"></script>
<script type="text/javascript">
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
		timestamp: "{$timestamp}", // 必填，生成签名的时间戳
		nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
		signature: '{$wxSha1}',// 必填，签名，见附录1
		jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.error(function(res){
		console.log(res);
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});
	//---------------link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praise&a=index&praise={$praise}",-----------
	wx.ready( function( e ){
		wx.onMenuShareAppMessage({
			title: "{$share_title}",
			desc: "{$share_desc}",
			link: location.protocol + "//" + window.location.hostname + "/Wap/Praise/index?praise={$praise}",
			imgUrl: "{$share_pic}",
			type: 'link',
			dataUrl: '',
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
		wx.onMenuShareTimeline({
			title: "{$share_title}",
			link: location.protocol + "//" + window.location.hostname + "/Wap/Praise/index?praise={$praise}",
			imgUrl: "{$share_pic}",
			success: function () {
			},
			complete: function () {
			},
			cancel: function () {
			},
			fail: function(){
			},
			trigger: function(){
			}
		});
	});
	var result_img = false
    function convert2canvas() {
        $("#share_btn").css("display", "none");
        if(result_img == false){
			var shareContent = $("body")[0];
			var width = shareContent.offsetWidth;
			var height = shareContent.offsetHeight;
			var canvas = document.createElement("canvas");
			var scale = 1;

			canvas.width = width * scale;
			canvas.height = height * scale;
			canvas.getContext("2d").scale(scale, scale);

			var opts = {
				scale: scale,
				canvas: canvas,
				logging: true,
				width: width,
				height: height
			};
			html2canvas(shareContent, opts).then(function (canvas) {
				var context = canvas.getContext('2d');

				var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

				document.body.appendChild(img);
				$(img).css({
					"width": canvas.width + "px",
					"height": canvas.height + "px",
					"position": "fixed",
					"top": 0,
					"left": 0,
					"display": "none"
				});
				img.onload = function(){
					var myCanvas = document.getElementById('myCanvas');
					myCanvas.width = width * 0.7;
					myCanvas.height = window.screen.availHeight * 0.75;
					$("#myCanvas").css({
						"position": "fixed",
						"left": "15%",
						"top": "8%",
						"display": "none",
						"z-index": 15
					});
					var ctx = myCanvas.getContext("2d");
					//--绘制白底--
					ctx.fillStyle="#FFFFFF";
					ctx.fillRect(0, 0, width*0.7, window.screen.availHeight * 0.75);

					//--绘制头部--
					ctx.shadowBlur=10;
					ctx.shadowColor="rgba(0,0,0,0.7)";
					var img_title = document.getElementById("wxtitle_img");
					ctx.drawImage(img_title, 0, 0, 469, 47, width * 0.05, width * 0.05, width * 0.602, width * 0.0693);

					//--绘制标题--
					ctx.shadowBlur=0;
					ctx.font="12px consolas";
					ctx.fillStyle = "black";
					ctx.fillText("识 别 二 维 码 参 与 投 票", width * 0.18, width * 0.05 + 16, width * 0.34);


					//--绘制截图--
					ctx.shadowBlur=10;
					ctx.shadowOffsetY=2;
					ctx.shadowColor="rgba(0,0,0,0.7)";
					ctx.drawImage(img, 0, 0, width, width * 1.4, width * 0.05, width * 0.1193, width * 0.602, width * 0.8428);

					//---绘制二维码--

					ctx.shadowBlur=0;
					ctx.shadowOffsetY=0;
					var img_qrcode = document.getElementById("qrcode");
					ctx.drawImage(img_qrcode, 0, 0, 148, 148, width * 0.245, width * 0.9621 + 10, width * 0.21, width * 0.21);

					//--绘制文字--
					ctx.font="12px consolas";
					ctx.fillStyle = "black";
					ctx.fillText("识 别 二 维 码 参 与 投 票", width * 0.18, width * 1.1721 + 25, width * 0.34);

					//--绘制角落--
					var img_corner = document.getElementById("corner_img");
					ctx.drawImage(img_corner, 0, 0, 89, 89, width * 0.56 + 4, window.screen.availHeight * 0.75 - width * 0.14 + 4, width * 0.14, width * 0.14);

					document.getElementById("result").src = myCanvas.toDataURL();
                    result_img = true;
					$("#result").css("display", "block");
					$("#mask").css("display", "block");
                    $("#cancle_img").css("display", "block");
				}
			});
        }else{
            $("#result").css("display", "block");
            $("#mask").css("display", "block");
            $("#cancle_img").css("display", "block");
		}
    }
    $("#mask").click(function(){
        cancle_img();
	});
	function cancle_img(){
        $("#result").css("display", "none");
        $("#cancle_img").css("display", "none");
        $("#mask").css("display", "none");
        $("#share_btn").css("display", "block");
	}
</script>
<script src="/Public/js/jquery.lazyload.js"></script>
</body>

</html>